import React, { useState, useEffect } from 'react'
import { Table, Space, Modal } from 'antd';
import { connect } from 'react-redux';
import { getTodoList } from '../../../redux/ations/userList'
function UserList(props) {
  const [isModalVisible, setIsModalVisible] = useState(false);
  useEffect(() => {
    props.getTodoList()
  }, [])
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
      align: 'center',
      render: text => <b style={{ cursor: 'pointer' }} onClick={showModal}>{text}</b>,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      align: 'center',
      render: text => (text === 0 ? '男' : '女'),
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (text, record) => (
        <Space size="middle">
          <a>修改</a>
          <a>删除</a>
        </Space>
      ),
    },
  ];
  return (
    <div>
      <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      <Table columns={columns} bordered={true} 
        dataSource={props.userList.list} rowKey='id' />
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  )
}
export default connect(
  state => ({
    userList: state.userList,
  }),
  { getTodoList }
)(UserList)
